<template>
  <el-dialog
    :model-value="refundDialogVisible"
    :destroy-on-close="true"
    title="退款"
    width="80%"
    @close="emits('closeDialog')"
  >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="send_bank" label="付款银行" align="center">
        <template #default="scope">
          {{ scope.row.send_bank }} {{ scope.row.send_branch }}
        </template>
      </el-table-column>
      <el-table-column
        prop="send_card_number"
        label="付款账号"
        align="center"
      />
      <el-table-column prop="send_card_name" label="付款人" align="center" />
      <el-table-column prop="send_amount" label="付款金额" align="center">
        <template #default="scope">
          {{ scope.row.send_amount }} {{ scope.row.send_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="send_fee" label="付款手续费" align="center">
      </el-table-column>
      <el-table-column
        :formatter="formatterTime"
        prop="send_pay_time"
        label="付款时间"
        width="150"
        align="center"
      />
      <el-table-column width="20" align="center" />
      <el-table-column
        :formatter="formatterTime"
        prop="bank_real_pay_time"
        label="银行出款时间"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column label="退款金额" align="center">
        <template #default="scope"
          ><span>{{ scope.row.refund_amount }}</span></template
        >
      </el-table-column>
      <el-table-column
        :formatter="formatterTime"
        prop="refund_time"
        label="退款时间"
        align="center"
      />
      <el-table-column prop="description" label="备注" align="center">
        <template #default="scope">
          {{ scope.row.description || "--" }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="refund(scope.$index, scope.row)"
            :disabled="scope.row.refund_amount > 0"
            >退款</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :model-value="refundDialog"
      :destroy-on-close="true"
      title="退款"
      width="60%"
      @close="refundDialog = false"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        prop="country_code"
        :rules="rules"
      >
        <el-form-item
          label="退款金额"
          :label-width="formLabelWidth"
          prop="refund_amount"
        >
          <el-input v-model="dialogForm.refund_amount" type="number" />
        </el-form-item>
        <el-form-item
          label="退款币种"
          :label-width="formLabelWidth"
          prop="currency"
        >
          <el-input v-model="dialogForm.currency" disabled />
        </el-form-item>
        <el-form-item
          label="备注"
          :label-width="formLabelWidth"
          prop="description"
        >
          <el-input v-model="dialogForm.description" type="textarea" rows="3" />
        </el-form-item>
        <el-form-item
          label="退款时间"
          :label-width="formLabelWidth"
          prop="refund_time"
        >
          <el-date-picker
            clearable
            v-model="dialogForm.refund_time"
            type="datetime"
            placeholder="请选择退款时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emits('refundCancel')">取消</el-button>
          <el-button
            type="primary"
            @click="submit(dialogForm)"
            :loading="btnLoading"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { formatDates, timestamp, formatterTime } from "@/utils/utils";
import { paymentFinishApi, paymentRefundApi } from "@/api/ExAssistant/review";

const props = defineProps({
  refundDialogVisible: {
    type: Boolean,
    default: false,
  },
  finishOrderNo: {
    type: String,
    default: "",
  },
  dialogForm: {
    type: Object,
    default: {
      order_no: "",
      refund_amount: "",
      description: "",
      currency: "",
      refund_time: "",
    },
  },
});

const emits = defineEmits(["closeDialog", "refundCancel", "submitForm"]);
const formLabelWidth = "140px";
const btnLoading = ref(false);
// 校验
const rules = {
  refund_amount: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  refund_time: [
    { required: true, message: "请选择退款时间", trigger: "change" },
  ],
};

const dialogFormRef = ref();
const tableData = ref([]);
const refundDialog = ref(false);
const currentRecordId = ref("");

watch(
  () => props.refundDialogVisible,
  (val) => {
    if (val) {
      getTableData(props.finishOrderNo);
    }
  }
);

const getTableData = (order_no) => {
  paymentFinishApi({ order_no }).then((res) => {
    tableData.value = res.data?.sends || [];
  });
};

const refund = (index, row) => {
  refundDialog.value = true;
  currentRecordId.value = row.id;
};

// 提交
const submit = async (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      let refund_time = 0;
      if (dialogForm.refund_time) {
        refund_time = timestamp(dialogForm.refund_time.valueOf());
      }
      try {
        const param = Object.assign(
          {},
          {
            order_no: dialogForm.order_no,
            record_id: currentRecordId.value,
            currency: dialogForm.currency,
            refund_amount: dialogForm.refund_amount,
            refund_time: refund_time,
            description: dialogForm.description,
          }
        );
        await paymentRefundApi(param);
        ElMessage({
          message: "退款成功",
          type: "success",
        });
        refundDialog.value = false;
        // refundDialogVisible.value = false;
        await getTableData(props.finishOrderNo);
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};
</script>
